<template>
  <div v-loading="isLoadingData">
    <el-button type="primary" plain @click="showAddCate">添加板块</el-button>
    <el-table :data="cate_list" stripe style="width: 100%">
      <el-table-column prop="id" width="80" label="ID" />
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="introduce" label="介绍" width="180" />
      <el-table-column prop="postnum" label="帖子数" width="80" />
      <el-table-column prop="interaction" label="回复数" width="80" />
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <el-button
            size="small"
            link
            type="primary"
            @click="showModifyCate(scope.$index)"
            >编辑</el-button
          >
          <el-button
            size="small"
            link
            type="danger"
            @click="showLockItem(scope.$index)"
          >
            <div v-if="cate_list[scope.$index].stat == 0">解锁</div>
            <div v-else>锁定</div>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="page"
      background
      :page-size="limit"
      layout="prev, pager, next"
      :total="total"
      style="margin: 2rem 0"
    />
  </div>

  <!---添加/编辑板块弹窗-->
  <dialog-confirm
    :title="cateConfig.id > 0 ? '修改板块' : '添加板块'"
    v-model:visible="dialogShow.addCate"
    @submit="addCate(cateConfig.id > 0)"
    :loading="isLocking"
  >
    <el-form>
      <el-form-item label="板块名称">
        <el-input v-model="cateConfig.name"></el-input>
      </el-form-item>
      <el-form-item label="板块简介">
        <el-input type="textarea" v-model="cateConfig.introduce"></el-input>
      </el-form-item>
    </el-form>
  </dialog-confirm>
  <!--停用板块弹窗-->
  <dialog-confirm
    title="提示"
    v-model:visible="dialogShow.lockCate"
    :loading="isLocking"
    @submit="lockItem(5)"
  >
    <span>
      <span>是否停用板块[ID:{{ activeItem.id }}]</span>
      <span style="color: #008ac5">{{ activeItem.name }}</span>
    </span>
  </dialog-confirm>
</template>
<script lang="ts">
import DialogConfirm from '@comps/dialogs/confirm.vue'
import Method from '@/globalmethods.ts'
import { ElMessage } from 'element-plus'
import { watch } from 'vue'
import { cateItem, res } from '../type.ts'

export default {
  name: 'admin-category',
  components: { DialogConfirm },
  data() {
    return {
      page: 1,
      limit: 10,
      total: 0,
      isLoadingData: false,
      isLockAccountDialogVisible: false,
      isLocking: false,
      isInjecting: false,
      isPassing: false,
      dialogShow: {
        addCate: false,
        lockCate: false,
      },
      activeItem: <cateItem>{},
      cateConfig: <cateItem>{
        id: 0,
        name: '',
        introduce: '',
      },
      cate_list: <cateItem[]>[],
    }
  },
  methods: {
    /**
     * 板块列表刷新
     */
    refreshCateList() {
      this.isLoadingData = true
      let payLoad = {
        page: this.page,
        limit: this.limit,
      }
      Method.api_post('/admin/cate_list', payLoad).then((response) => {
        this.isLoadingData = false
        let res = response.data
        if (res.code == 200) {
          if (this.page == 1) this.total = res.sum
          this.cate_list = res.data
        }
      })
    },
    showAddCate() {
      this.dialogShow.addCate = true
      this.cateConfig = <cateItem>{
        id: 0,
        name: '',
        introduce: '',
      }
    },
    addCate(modify: boolean) {
      this.isLocking = true
      let payLoad = this.cateConfig
      if (modify) payLoad.id = this.activeItem.id
      Method.api_post('/admin/add_cate', payLoad).then((response) => {
        let res = response.data
        this.isLocking = false
        if (res.code == 200) {
          this.dialogShow.addCate = false
          this.refreshCateList()
          ElMessage(modify ? '修改成功' : '添加成功')
        } else {
          ElMessage(res.msg)
        }
      })
    },
    showModifyCate(index: number) {
      this.dialogShow.addCate = true
      this.activeItem = this.cate_list[index]
      this.cateConfig = Method.copyObject(this.activeItem)
    },
    showLockItem(index: number) {
      this.dialogShow.lockCate = true
      this.activeItem = this.cate_list[index]
    },

    lockItem(type: number) {
      this.isLocking = true
      let id = this.activeItem.id
      let stat = this.activeItem.stat == 1 ? 0 : 1
      Method.api_post('/admin/lock_item', {
        type: type,
        id: id,
        stat: stat,
      }).then((response) => {
        this.isLocking = false
        let res = <res>response.data
        if (res.code == 200) {
          this.activeItem.stat = res.data.stat
          this.dialogShow.lockCate = false
          ElMessage(res.data.stat === 0 ? '锁定成功' : '解锁成功')
        }
      })
    },
  },
  mounted() {
    this.refreshCateList()
    watch(
      () => this.page,
      () => {
        this.refreshCateList()
      },
    )
  },
}
</script>
